<template>
  <router-link tag="div" :to="to" class="story-nav_item">
    {{ title }}
  </router-link>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "NavItem",
  props: {
    to: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
  },
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
 .story-nav_item {
    a {
      display: block;
      margin: 0;
      padding: 0px 0 0px 30px;
   
      line-height: 28px;
    
      transition: color 0.2s;
      font-size: 13px;
     color: #323233;
      &:hover,
      &.active {
        color: #4fc08d;
      }
    }
  }
</style>